<template>
  <div class="main ad-manage-list">
    <section>
      <div class="btn-block" v-if="rightsButtons['add']">
        <router-link :to="{name: 'b-taobaoActivityAdd'}" class="filter-item">
          <el-button type="success" size="small" icon="el-icon-circle-plus" plain>新建淘宝官方活动</el-button>
        </router-link>
      </div>
      <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="82px">
        <input type="text" style="display: none"/>
        <el-row :gutter="50">
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item label="淘宝活动名称:" prop="activityName" label-width="120px">
              <el-input @keyup.enter.native="search" v-model="listQuery.activityName" placeholder="标题" maxlength="50" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
              <el-form-item label="活动开始时间：" prop="tempDateRange" label-width="120px">
                <el-date-picker
                  v-model="listQuery.tempDateRange"
                  type="datetimerange"
                  range-separator="~"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label class="btn-item">
            <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
          <span class="btn-reset" @click="resetForm('searchForm')" >清空搜索条件</span>
        </el-form-item>
      </el-form>
      <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
        <el-table-column align="center" label="淘宝活动ID" prop="id"></el-table-column>
        <el-table-column align="center" label="淘宝活动名" prop="activityName"></el-table-column>
        <el-table-column align="center" label="活动开始时间" prop="startTime"></el-table-column>
        <el-table-column align="center" label="活动结束时间" prop="endTime"></el-table-column>
        <el-table-column align="center" label="是否有中间页">
          <template slot-scope="scope">
            <span>{{scope.row.centerPage===0?'否': '是'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" v-if="rightsButtons['edit']">
          <template slot-scope="scope">
          <router-link :to="{name: 'b-taobaoActivityEdit', params: {id: scope.row.id}}">
            <el-button type="primary" size="mini">编辑</el-button>
          </router-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum" 
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize" background
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
      ></el-pagination>
    </section>
  </div>
</template>

<script>
import { tbActivityList } from '@/api/bihuasuan/taobaoActivity'
export default {
  name: 'b-taobaoActivity',
  data() {
    return {
      list: [],
      listQuery: {
        activityName: '',
        tempDateRange: [],
        startTime: '',
        endTime: '',
        pageNum: 1,
        pageSize: 10
      },
      listTotal: 0,
      listLoading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表
    async getList() {
      this.listLoading = true
      let date = this.listQuery.tempDateRange;
      this.listQuery.startTime = date && date.length ? date[0] : ''
      this.listQuery.endTime = date && date.length ? date[1] : ''
      try {
        const { data } = await tbActivityList(this.listQuery)
        this.list = data.list
        console.log(this.list)
        this.listTotal = data.total
        this.listLoading = false
      } catch (error) {
        this.list = []
        this.listTotal = 0
        this.listLoading = false
      }
    },
    // 清空搜索条件
    resetForm(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields()
      })
    },
    // 搜索
    search() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    //切换每页条数
    handleSizeChange(value) {
      this.listQuery.pageSize = value
      this.getList()
    },
    // 切换分页
    handleCurrentChange(page) {
      this.listQuery.pageNum = page
      this.getList()
    }
  }
}
</script>

<style lang="scss">
.ad-manage-list > section {
  padding: 24px;
  background: #fff;
}
</style>
